<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇小游戏</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #000;
            color: #fff;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 1px solid #fff;
        }
        .score {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 20px;
        }
        .game-over {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="score">分数: <span id="score">0</span></div>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <div class="game-over" id="gameOver">
        <p>游戏结束，你的分数是: <span id="finalScore">0</span></p>
        <p>按 R 键重新开始</p>
    </div>
    <script src="snake.js"></script>
</body>
</html>

<script>
    const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const gameOverElement = document.getElementById('gameOver');
const finalScoreElement = document.getElementById('finalScore');

const BLOCK_SIZE = 20;
const WIDTH = canvas.width;
const HEIGHT = canvas.height;

let snake = [{ x: 400, y: 300 }, { x: 380, y: 300 }, { x: 360, y: 300 }];
let direction = { x: BLOCK_SIZE, y: 0 };
let food = { x: 0, y: 0 };
let score = 0;
let gameOver = false;

function generateFood() {
    food.x = Math.floor(Math.random() * (WIDTH / BLOCK_SIZE)) * BLOCK_SIZE;
    food.y = Math.floor(Math.random() * (HEIGHT / BLOCK_SIZE)) * BLOCK_SIZE;
    if (snake.some(segment => segment.x === food.x && segment.y === food.y)) {
        generateFood();
    }
}

function drawSnake() {
    ctx.fillStyle = 'green';
    snake.forEach(segment => ctx.fillRect(segment.x, segment.y, BLOCK_SIZE, BLOCK_SIZE));
}

function drawFood() {
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, BLOCK_SIZE, BLOCK_SIZE);
}

function updateSnake() {
    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
    snake.unshift(head);

    if (head.x === food.x && head.y === food.y) {
        score++;
        scoreElement.textContent = score;
        generateFood();
    } else {
        snake.pop();
    }
}

function checkCollision() {
    const head = snake[0];
    if (head.x < 0 || head.x >= WIDTH || head.y < 0 || head.y >= HEIGHT) {
        return true;
    }
    for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
            return true;
        }
    }
    return false;
}

function gameLoop() {
    if (gameOver) {
        return;
    }

    ctx.clearRect(0, 0, WIDTH, HEIGHT);
    drawSnake();
    drawFood();
    updateSnake();

    if (checkCollision()) {
        gameOver = true;
        finalScoreElement.textContent = score;
        gameOverElement.style.display = 'block';
    } else {
        setTimeout(gameLoop, 100);
    }
}

document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp' && direction.y === 0) {
        direction = { x: 0, y: -BLOCK_SIZE };
    } else if (e.key === 'ArrowDown' && direction.y === 0) {
        direction = { x: 0, y: BLOCK_SIZE };
    } else if (e.key === 'ArrowLeft' && direction.x === 0) {
        direction = { x: -BLOCK_SIZE, y: 0 };
    } else if (e.key === 'ArrowRight' && direction.x === 0) {
        direction = { x: BLOCK_SIZE, y: 0 };
    } else if (e.key === 'r' && gameOver) {
        snake = [{ x: 400, y: 300 }, { x: 380, y: 300 }, { x: 360, y: 300 }];
        direction = { x: BLOCK_SIZE, y: 0 };
        score = 0;
        scoreElement.textContent = score;
        gameOver = false;
        gameOverElement.style.display = 'none';
        generateFood();
        gameLoop();
    }
});

generateFood();
gameLoop();
</script>